import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {
  Button,
  Dialog,
  Text,
  View,
  RadioGroup,
  RadioButton,
  TextField,
} from 'react-native-ui-lib';
import {isIPhoneX} from '../../configs/platform';
import {commonStyles} from '../../configs/commonStyle';
import {updateAsk} from '../../net/seekOrder';

export default class HandleDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      data: {},
      showHeader: true,
      disposeState: '1',
      reason: '人手不足',
      resultContent: '',
    };
  }

  show = dataInfo => {
    this.setState({isOpen: true});
    this.dataInfo = dataInfo;
  };

  dismiss = () => {
    this.setState({isOpen: false});
  };

  renderPannableHeader = props => {
    return (
      <View>
        <View margin-10 center>
          <Text style={{...commonStyles.text_black_18}}>咨询工单处理</Text>
        </View>
        <View height={1} bg-line />
      </View>
    );
  };

  onConfirm = () => {
    const content =
      this.state.disposeState == 2
        ? `【${this.state.reason}】${this.state.resultContent}`
        : '';
    const params = {
      id: this.dataInfo.id,
      disposeState: this.state.disposeState,
      resultContent: content,
    };
    updateAsk(params).then(res => {
      if (res.code == 200) {
        Toast.show('处理成功');
        this.dismiss();
        this.props.callback && this.props.callback()
      } else {
        Toast.show('处理失败');
      }
    });
  };

  render() {
    const {isOpen, showHeader, title, disposeState, reason, resultContent} = this.state;
    const renderPannableHeader = showHeader
      ? this.renderPannableHeader
      : undefined;
    return (
      <Dialog
        migrate
        useSafeArea
        containerStyle={styles.roundedDialog}
        visible={isOpen}
        width={'70%'}
        onDismiss={this.dismiss}
        renderPannableHeader={renderPannableHeader}>
        <View padding-10>
          <View>
            <Text>是否满足</Text>
            <RadioGroup
              initialValue={disposeState}
              onValueChange={value => {
                this.setState({disposeState: value});
              }}
              style={styles.radioContainer}>
              <RadioButton value={'1'} label={'满足'} />
              <RadioButton value={'2'} label={'不满足'} />
            </RadioGroup>
          </View>
          {disposeState == '2' ? (
            <View>
              <Text>不满足原因</Text>
              <RadioGroup
                initialValue={reason}
                onValueChange={value => {
                  this.setState({reason: value});
                }}
                style={styles.reasonContainer}>
                <RadioButton
                  value={'人手不足'}
                  label={'人手不足'}
                  style={{marginBottom: 10, marginTop: 10}}
                />
                <RadioButton
                  value={'距离较远'}
                  label={'距离较远'}
                  style={{marginBottom: 10}}
                />
                <RadioButton
                  value={'时间不满足'}
                  label={'时间不满足'}
                  style={{marginBottom: 10}}
                />
                <RadioButton
                  value={'其他'}
                  label={'其他'}
                  style={{marginBottom: 10}}
                />
              </RadioGroup>
            </View>
          ) : null}
          <View style={styles.textInput}>
            <TextField
              multiline
              hideUnderline
              maxLength={100}
              containerStyle={{flex: 1}}
              value={resultContent}
              onChangeText={
                resultContent => this.setState({resultContent})
              }
              text14
              placeholder="备注/不满足原因..."
            />
          </View>
        </View>
        <View row style={{borderTopColor: '#eeeeee', borderTopWidth: 1}}>
          <Button
            flex
            background-white
            labelStyle={{color: '#666666'}}
            text14
            label={'取消'}
            onPress={() => {
              this.dismiss();
              this.props.cancalClick && this.props.cancalClick();
            }}
          />

          <View style={{backgroundColor: '#eeeeee', width: 1}} />
          <Button
            flex
            label={'确定'}
            background-white
            labelStyle={{color: '#F9D63B'}}
            text14
            onPress={() => {
              this.onConfirm();
            }}
          />
        </View>
      </Dialog>
    );
  }
}

const styles = StyleSheet.create({
  roundedDialog: {
    backgroundColor: 'white',
    marginBottom: isIPhoneX ? 0 : 20,
    borderRadius: 4,
  },
  resultContent: {
    fontSize: 14,
    color: '#141414',
    lineHeight: 25,
    minHeight: 50,
    textAlign: 'center',
  },
  radioContainer: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
    flexDirection: 'row',
    height: 50,
  },
  reasonContainer: {
    marginLeft: 40,
  },
  textInput: {
      height: 100,
      borderWidth: 1,
      marginBottom: 10,
      padding: 10,
      borderRadius: 4,
      borderColor: '#eeeeee',
      backgroundColor: '#F0F0F0',
  },
});
